<template>
  <div>
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      align="center"
    >
      <el-form ref="roleForm" :inline="true" :rules="rules" :model="RoleForm" class="form-inline">
        <el-form-item label="角色名称" prop="name">
          <el-input
            v-model="RoleForm.name"
            placeholder=""
            maxlength="16"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item label="角色代码" prop="code">
          <el-input
            v-model="RoleForm.code"
            placeholder=""
            maxlength="16"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item class="remark" label="角色备注" prop="remark">
          <el-input
            v-model="RoleForm.remark"
            placeholder=""
            maxlength="16"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item class="status" label="是否启用">
          <el-radio-group v-model="RoleForm.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">未启用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-footer align="right">
        <el-button class="Button" @click="closed">取 消</el-button>
        <el-button class="Button" type="primary" @click="onSubmit()">确 定</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>
<script>
import { addRoleAPI, searchRoleAPI, editRoleAPI } from '@/api/rolesAPI'
import { validRoleName, validRolCode } from '@/utils/validate'
import throttle from 'lodash/throttle'
export default {
  name: 'RoleInfoDialog',
  props: {
    dialogType: {
      type: String,
      default: 'ADD'
    },
    roleID: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '',
      dialogVisible: false,
      RoleForm: {},
      rules: {
        name: [
          { validator: validRoleName, required: true, trigger: 'blur' }
        ],
        code: [
          { validator: (rule, value, callback) => {
            validRolCode(rule, value, callback, this.RoleForm.id)
          },

          required: true, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    /**
     * 根据对话框打开类型不同进行初始化
     */
    initUI() {
      if (this.dialogType === 'ADD') {
        this.title = '新增角色'
        this.RoleForm = {
          name: '',
          code: '',
          remark: '',
          status: '1'
        }
      } else {
        if (this.dialogType === 'EDIT') { this.title = '编辑角色' }
        if (this.dialogType === 'COPY') { this.title = '复制角色' }
        this.$nextTick(() => {
          searchRoleAPI(this.roleID)
            .then((res) => {
              this.RoleForm = res
              this.RoleForm.status = this.RoleForm.status ? '1' : '0'
              if (this.dialogType === 'COPY') { delete this.RoleForm.id }
            })
            .catch((error) => {
              this.$message({
                message: '角色信息获取失败',
                type: 'error',
                duration: 5000
              })
              console.log(error)
            })
        })
      }
    },
    onShow() {
      debugger
      this.initUI()
      this.$nextTick(() => {
        this.dialogVisible = true
      })
    },
    /**
     * 对话框关闭处理函数
     * @param {*} done
     */
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$refs.roleForm.resetFields()
          this.RoleForm = {
            name: '',
            code: '',
            remark: '',
            status: '1'
          }
          done()
        })
        .catch(_ => {})
    },
    /**
     * 提交表单函数,使用节流函数
     */
    onSubmit: throttle(
      function() {
        debugger
        this.$refs.roleForm.validate((valid) => {
          if (valid) {
            debugger
            if (this.dialogType === 'EDIT') {
              editRoleAPI(this.RoleForm).then(res => {
                if (res) {
                  this.$message({
                    message: '修改角色成功',
                    type: 'success',
                    duration: 5000
                  })
                }
                this.$emit('EndEvent')
                this.closed()
              })
                .catch((error) => {
                  this.$message({
                    message: '修改角色失败',
                    type: 'error',
                    duration: 5000
                  })
                  console.log(error)
                })
            } else {
              addRoleAPI(this.RoleForm).then(res => {
                if (res) {
                  this.$message({
                    message: '添加角色成功',
                    type: 'success',
                    duration: 5000
                  })
                }
                // 提交结束事件
                this.$emit('EndEvent')
                this.closed()
              })
                .catch(error => {
                  this.$message.error(error)
                })
            }
          } else {
            this.$message({
              message: '信息不合法',
              type: 'error',
              duration: 5000
            })
            return false
          }
        })
      }, 5000,
      { trailing: false }
    ),
    closed() {
      this.dialogVisible = false
      this.title = ''
      this.$refs.roleForm.resetFields()
      this.RoleForm = {
        name: '',
        code: '',
        remark: '',
        status: '1'
      }
    }
  }
}
</script>
<style scoped>
.dialog-footer{
  text-align: center
}
.Button{
  display: inline-block;
}
::v-deep.remark{
margin-right: 20px;
/* background: #000; */
}
::v-deep .status{
  /* display: block; */
  margin-right: 50px;
}
</style>
